import {
  EditableProTable,
  ProTable,
  ProFormDigit, ProFormMoney, ProFormCheckbox, ProFormText
} from '@ant-design/pro-components';
import React, { useEffect, useState, forwardRef } from 'react';
import { Button, Modal, Upload, Space, Tooltip, message, Alert } from "antd";
import Decimal from 'decimal.js';
import TheButton from "@/components/TheButton/index.jsx";
import TheImage from "@/components/TheImage/index.jsx";
import './style.less'
import { apiGoodsStockInfo } from '@/api/marketingTool';
import { apiBulkImport, apiBulkUpdate } from '@/api/marketingTool/kill.js';


const { confirm } = Modal
const Editable = (props) => {
  const isProprietary = props.isProprietary || ''
  const selectKeys = props.value.map((item) => item.goodsId);
  const [dataSource, setDataSource] = useState(props.value || []);
  const [selectedRows, setSelectedRows] = useState([]);
  const [disabledKeys, setDisabledKeys] = useState([]);
  const [modalOpen, setModalOpen] = useState(false);
  const [pageParams, setPageParams] = useState({
    pageNo: 1,
    pageSize: 10,
    // total: 0
  })
  const [alertType, setAlertType] = useState()
  const [importInfo, setImportInfo] = useState({
    title: '', data: [], message: ''
  });
  const mode = props.mode;
  const columns = [
    {
      title: '商品ID',
      dataIndex: 'goodsId',
      key: 'goodsId',
      width: 200,
      ellipsis: true
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      width: 300,
      ellipsis: true,
    },
    {
      title: 'sku',
      dataIndex: 'sku',
      key: 'sku',
      width: 300,
      ellipsis: true,
      render: (text, record, index) => (
        record.skuInfoVos.map((sku, skuIndex) => {
          const strArr = sku.skuAttributes.map(item => item.goodsKeyName + ':' + item.goodsValue)
          return <div className='span' key={skuIndex + 'sku'}>{strArr.join(';')}</div>
        })
      )
    },
    {
      title: '库存',
      dataIndex: 'skuStock',
      key: 'skuStock',
      width: 100,
      render: (text, record, index) => (
        record.skuInfoVos.map((sku, skuIndex) => {
          return <div className='span'
            key={skuIndex + 'skuStock'}>{sku.skuStock === -1 ? '不限量' : sku.skuStock}</div>
        })
      )
    },
    {
      title: '活动库存',
      dataIndex: 'a_stock',
      key: 'a_stock',
      width: 150,
      render: (text, record, index) => (
        record.skuInfoVos.map((sku, skuIndex) => {
          return (
            <div className='span' key={skuIndex + 'a_stock'}>
              <ProFormDigit
                // name={['temp', `${index}-${skuIndex}-a_stock`]}
                name={['temp', record.goodsId, 'skuInfoVos', skuIndex, `a_stock`]}
                min={0}
                max={999999}
                readonly={mode === 'view' || sku.isJoin}
                fieldProps={{
                  precision: 0,
                  // value: sku.a_stock,
                  onChange: async (e) => {
                    await aInputChange(e, 'a_stock', index, skuIndex);
                  }
                }}
                initialValue={sku.a_stock}
                formItemProps={{
                  style: {
                    marginBottom: 0
                  },
                }}
                rules={[
                  {
                    required: true,
                    message: '请填写活动库存'
                  },
                  {
                    validator: (_, value) => {
                      if (mode === 'add') {
                        if (value > sku.skuStock && sku.skuStock !== -1) {
                          return Promise.reject(new Error('秒杀库存必须小于等于实际库存值'));
                        }
                      } else if (mode === 'edit') {
                        if (value < sku.goodsBuySum) {
                          return Promise.reject(new Error('秒杀活动库存小于实际已售卖的数量'));
                        } else if (value > (sku.activityStock_copy + sku.skuStock) && sku.skuStock !== -1) {
                          // return Promise.reject(new Error('秒杀填写的库存增量差必须小于等于商品正价售卖的库存值'));
                          return Promise.reject(<Tooltip
                            title="秒杀填写的库存增量差必须小于等于商品正价售卖的库存值">
                            <span>秒杀填写的库存增量差必须小于等于商品正价售卖的库存值.</span>
                          </Tooltip>);
                        }
                      }
                      if (sku.hasOwnProperty('goodsSurplusSum') || sku.hasOwnProperty('goodsBuySum')) {
                        if (value < sku.goodsBuySum) {
                          return Promise.reject(new Error('秒杀活动库存小于实际已售卖的数量'));
                        }
                      }
                      return Promise.resolve();
                    }
                  }
                ]}
              />
            </div>
          )
        })
      )
    },
    {
      title: '活动剩余库存',
      dataIndex: 'goodsSurplusSum',
      key: 'goodsSurplusSum',
      width: 150,
      hideInTable: mode === 'add',
      render: (text, record) => (
        record.skuInfoVos.map((sku, skuIndex) => {
          return <div className='span' key={skuIndex + 'goodsSurplusSum'}>
            <ProFormText
              readonly={true}
              name={['temp', record.goodsId, 'skuInfoVos', skuIndex, `goodsSurplusSum`]}
              formItemProps={{
                style: {
                  marginBottom: 0
                }
              }}
              initialValue={sku.goodsSurplusSum}
            />
          </div>
        })
      )
    },
    {
      title: '已售数量',
      dataIndex: 'goodsBuySum',
      key: 'goodsBuySum',
      width: 150,
      hideInTable: mode === 'add',
      render: (text, record) => (
        record.skuInfoVos.map((sku, skuIndex) => {
          return <div className='span' key={skuIndex + 'goodsBuySum'}>
            <ProFormText
              readonly={true}
              name={['temp', record.goodsId, 'skuInfoVos', skuIndex, `goodsBuySum`]}
              formItemProps={{
                style: {
                  marginBottom: 0
                }
              }}
              initialValue={sku.goodsBuySum}
            />
          </div>
        })
      )
    },
    {
      title: '日常价',
      dataIndex: 'skuCurrentPrice',
      key: 'skuCurrentPrice',
      width: 150,
      render: (text, record) => (
        record.skuInfoVos.map((sku, skuIndex) => {
          return (
            <div className='span' key={skuIndex + 'skuCurrentPrice'}>
              <ProFormMoney
                readonly={true}
                formItemProps={{
                  style: {
                    marginBottom: 0
                  }
                }}
                value={Decimal(sku.skuCurrentPrice).div(Decimal(100)).toFixed(2) || 0}
              />
            </div>
          )
        })
      )
    },
    {
      title: '活动价',
      dataIndex: 'a_price',
      key: 'a_price',
      width: 150,
      render: (text, record, index) => (
        record.skuInfoVos.map((sku, skuIndex) => {
          return (
            <div className='span' key={skuIndex + 'a_price'}>
              <ProFormMoney
                // name={['temp', `${index}-${skuIndex}-a_price`]}
                name={['temp', record.goodsId, 'skuInfoVos', skuIndex, `a_price`]}
                min={0}
                max={999999}
                readonly={mode === 'view' || sku.isJoin}
                formItemProps={{
                  style: {
                    marginBottom: 0
                  }
                }}
                initialValue={sku.a_price}
                onChange={async (e) => {
                  await aInputChange(e, 'a_price', index, skuIndex);
                }}
                rules={[
                  {
                    required: true,
                    message: '请填写活动价'
                  },
                ]}
              />
            </div>
          )
        })
      )
    },
    {
      title: '限购',
      dataIndex: 'quota_count',
      key: 'quota_count',
      width: 250,
      render: (text, record, index) => (
        record.skuInfoVos.map((sku, skuIndex) => {
          return (
            <div className='span' key={skuIndex + 'quota_count'}>
              {
                mode !== 'view' && !sku.isJoin ? (
                  <>
                    <Space>
                      <ProFormCheckbox.Group
                        // name={['temp', `${index}-${skuIndex}-isLimit`]}
                        name={['temp', record.goodsId, 'skuInfoVos', skuIndex, `isLimit`]}
                        disabled={sku.isJoin || mode === 'view'}
                        options={['每人限购']}
                        value={sku.isLimit ? ['每人限购'] : []}
                        onChange={(e) => {
                          isLimit(e.length, 'isLimit', index, skuIndex)
                        }}
                        formItemProps={{
                          style: {
                            marginBottom: 0
                          }
                        }}
                      />
                      <ProFormDigit
                        // name={['temp', `${index}-${skuIndex}-quota_count`]}
                        name={['temp', record.goodsId, 'skuInfoVos', skuIndex, `quota_count`]}
                        dependencies={[['temp', record.goodsId, 'skuInfoVos', skuIndex, `isLimit`]]}
                        min={0}
                        max={999999}
                        readonly={mode === 'view' || sku.isJoin}
                        fieldProps={{
                          precision: 0,
                        }}
                        width={100}
                        value={sku.quota_count}
                        onChange={async (e) => {
                          await aInputChange(e, 'quota_count', index, skuIndex);
                        }}
                        formItemProps={{
                          style: {
                            marginBottom: 0
                          }
                        }}
                        rules={[
                          {
                            required: true,
                            validator: (_, value) => {
                              if (sku.quota_count === null || sku.quota_count === undefined) {
                                if (sku.isLimit && (value === undefined || value === null)) {
                                  return Promise.reject(new Error('请填写限购件数'));
                                }
                              }
                              return Promise.resolve();
                            }
                          },
                        ]}
                      />
                      <ProFormText
                        readonly={true}
                        value={"件"}
                        formItemProps={{
                          style: {
                            marginBottom: 0
                          }
                        }}
                      />
                    </Space>
                    {(sku.quota_count_tip && sku.isLimit) ? <span className='tip'
                      style={{ paddingLeft: 90 }}>{sku.quota_count_tip}</span> : null}
                  </>
                ) : sku.quota_count === -1 || sku.isJoin ? '不限购' : `每人限购${sku.quota_count}件`
              }
            </div>
          )
        })
      )
    },
    {
      title: '排序',
      dataIndex: 'killSort',
      key: 'killSort',
      width: 150,
      hideInTable: isProprietary === 'N',
      render: (text, record, index) => (
        <div key={index + 'killSort'} className='span'>
          <ProFormDigit
            // name={['temp', `${index}-killSort`]}
            name={['temp', record.goodsId, 'killSort']}
            min={0}
            max={999999}
            readonly={mode === 'view'}
            fieldProps={{
              precision: 0,
            }}
            formItemProps={{
              style: {
                marginBottom: 0
              }
            }}
            initialValue={record.killSort}
            onChange={async (e) => {
              await aInputChange(e, 'killSort', index);
            }}
            rules={[
              {
                required: true,
                message: '请填写排序'
              },
            ]}
          />
        </div>
      )
    },
    {
      title: '虚拟抢购件数',
      dataIndex: 'virtualCount',
      key: 'virtualCount',
      width: 150,
      render: (text, record, index) => (
        record.skuInfoVos.map((sku, skuIndex) => {
          return (
            <div className='span' key={skuIndex + 'virtualCount'}>
              <ProFormDigit
                // name={['temp', `${index}-${skuIndex}-virtualCount`]}
                name={['temp', record.goodsId, 'skuInfoVos', skuIndex, `virtualCount`]}
                dependencies={[['temp', record.goodsId, 'skuInfoVos', skuIndex, `a_stock`]]}
                min={0}
                max={999999}
                readonly={sku.isJoin}
                fieldProps={{
                  precision: 0,
                }}
                formItemProps={{
                  style: {
                    marginBottom: 0
                  }
                }}
                value={sku.virtualCount}
                onChange={async (e) => {
                  await aInputChange(e, 'virtualCount', index, skuIndex);
                }}
                rules={[
                  {
                    validator: (_, value) => {
                      if (value !== undefined && value >= sku.a_stock && sku.a_stock > 0) {
                        return Promise.reject(<Tooltip
                          title="虚拟抢购件数必须小于实际活动库存值">
                          <span>虚拟抢购件数必须小于实际活动库存值.</span>
                        </Tooltip>);
                      }
                      return Promise.resolve();
                    }
                  }
                ]}
              />
            </div>
          )
        })
      )
    },
    {
      title: '操作',
      valueType: 'option',
      fixed: "right",
      hideInTable: mode === 'view',
      render: (text, record, index, action) => (
        <TheButton onClick={() => delGoods(record, index)}>删除</TheButton>
      )
    },
  ];
  const goodsColumns = [
    {
      title: "商品ID",
      key: "goodsId",
      width: 100,
      dataIndex: "goodsId",
    },
    {
      title: "商品名称",
      key: "goodsName",
      width: 300,
      ellipsis: true,
      dataIndex: "goodsName",
    },
    {
      title: "商品图片",
      key: "goodsShowImages",
      dataIndex: "goodsShowImages",
      hideInSearch: true,
      width: 500,
      render: (text) => {
        return <TheImage
          width={80}
          height={80}
          src={text.split(',')}
        />
      }
    },
    {
      title: "所属类目",
      key: "goodsClassifyName",
      dataIndex: "goodsClassifyName",
      hideInSearch: true,
    },
    {
      title: "商品状态",
      key: "goodsStatus",
      dataIndex: "goodsStatus",
      width: 100,
      hideInSearch: true,
      render: (text, render) => {
        return text === 'Y' ? '上架' : '下架'
      },
    },
    {
      title: "上次操作时间",
      key: "updateTime",
      dataIndex: "updateTime",
      hideInSearch: true,
    }
  ]
  const aInputChange = (e, key, index, skuIndex) => {
    const data = [...dataSource]
    const { pageNo, pageSize } = pageParams
    const currentIndex = (pageNo - 1) * pageSize + index
    if (key === 'killSort') {
      data[currentIndex][key] = e
    } else {
      data[currentIndex].skuInfoVos[skuIndex][key] = e
    }
    setDataSource(data)
  }
  const isLimit = (e, key, index, skuIndex) => {
    const data = [...dataSource]
    const { pageNo, pageSize } = pageParams
    const currentIndex = (pageNo - 1) * pageSize + index
    data[currentIndex].skuInfoVos[skuIndex].isLimit = e
    setDataSource(data)
  }
  const delGoods = (record, index) => {
    confirm({
      title: "提示",
      type: 'warning',
      content: "删除商品可能导致正在购买的消费者无法正常下单，是否继续删除？",
      onOk: async () => {
        const data = [...dataSource]
        const { pageNo, pageSize } = pageParams
        data.splice((pageNo - 1) * pageSize + index, 1)
        setSelectedRows(data)
        setDataSource(data)
      }
    });
  }

  const downloadDemo = () => {
    if (mode === 'add') {
      const a = document.createElement('a')
      a.href = "https://hqmimage.oss-cn-beijing.aliyuncs.com/秒杀模板/新增秒杀商品模板.xlsx "
      document.body.append(a)
      a.click()
      a.remove()
    } else {
      const a = document.createElement('a')
      a.href = "/market/api/seckillActivity/uploadGoods?activityId=" + props.activityId
      document.body.append(a)
      a.click()
      a.remove()
    }
  }
  useEffect(() => {
    if (mode === 'edit') {
      // 处理编辑时回显数据赋值给弹窗默认数据
      setSelectedRows(props.value)
      setDisabledKeys(props.value.map((item) => item.goodsId))
    }
  }, [])
  useEffect(() => {
    props.set(dataSource)
  }, [dataSource])
  // 导入
  const uploadProps = {
    name: 'file',
    maxCount: 1,
    showUploadList: false,
    onChange: (info) => {
      if (info.file.status === 'done') {
        // message.success('上传成功');
      }
      if (info.file.status === 'error') {
        message.error('上传失败');
      }
    },
    customRequest: (option) => {
      if (props.formRef.current.getFieldValue('activityTime')) {
        if (mode === 'edit') {
          let params = {
            file: option.file,
            startTime: props.formRef.current.getFieldFormatValue('warmingTime'),
            endTime: props.formRef.current.getFieldFormatValue('endTime'),
          }
          params.activityId = props.activityId;
          apiBulkUpdate(params).then(res => {
            if (res.code === 0) {
              // console.log(res, 'ress');
              const { code, data, codeMessage
              } = res
              if (code === 0) {
                const { goodList, status } = data
                if (status === 'N') {
                  setAlertType("error")
                  setImportInfo({
                    title: '导入失败！',
                    data: data,
                    message: data.message,
                    failFile: data.failFile
                  })
                  return
                }
                const dataSource = []
                goodList.forEach(item => {
                  const good = {
                    killSort: item.sort,
                    goodsId: item.goodsId,
                    goodsName: item.goodsName,
                  }
                  let curLowPrice = item.skuList[0].skuCurrentPrice, curLowIndex = 0
                  good.skuInfoVos = item.skuList.map((sku, index) => {
                    if (sku.skuCurrentPrice <= curLowPrice) {
                      curLowIndex = index
                      curLowPrice = sku.skuCurrentPrice
                    }
                    sku.skuEnabled = true
                    return {
                      "materialId": sku.materialId,//物料编码
                      "goodsSkuId": sku.goodsSkuId,//skuId
                      "isJoin": 0,//0参加 1不参加
                      skuAttributes: sku.skuAttributes || [],
                      skuStock: sku.skuStock,
                      "a_stock": sku.activityStock,//活动库存
                      skuCurrentPrice: sku.skuCurrentPrice ? sku.skuCurrentPrice : 0,
                      "a_price": sku.activityGoodsSkuPrice ? Decimal(sku.activityGoodsSkuPrice).div(Decimal(100)).toFixed(2) : 0,//活动价格
                      'isLimit': sku.quota === -1 ? 0 : 1,
                      "quota_count": sku.quota === -1 ? null : sku.quota,
                      "virtualCount": sku.virtualNum//虚拟抢购件数
                    }
                  })
                  good.skuInfoVos[curLowIndex].isJoin = 0
                  good.skuInfoVos[curLowIndex].isLow = true
                  dataSource.push(good)
                })
                setDataSource(dataSource)
              } else {
                message.error(codeMessage)
              }
            } else {
              message.error(res.codeMessage)
            }
          })
        }
        else {
          let params = {
            file: option.file,
            startTime: props.formRef.current.getFieldValue('activityTime')[0].format("YYYY-MM-DD HH:mm"),
            endTime: props.formRef.current.getFieldValue('activityTime')[1].format("YYYY-MM-DD HH:mm"),
          }
          apiBulkImport(params).then(res => {
            if (res.code === 0) {
              const { code, data, codeMessage
              } = res
              if (code === 0) {
                const { goodList, status } = data
                if (status === 'N') {
                  setAlertType("error")
                  setImportInfo({
                    title: '导入失败！',
                    data: data,
                    message: data.message,
                    failFile: data.failFile
                  })
                  return
                }
                const dataSource = []
                goodList.forEach(item => {
                  const good = {
                    killSort: item.sort,
                    goodsId: item.goodsId,
                    goodsName: item.goodsName,
                  }
                  let curLowPrice = item.skuList[0].skuCurrentPrice, curLowIndex = 0
                  good.skuInfoVos = item.skuList.map((sku, index) => {
                    if (sku.skuCurrentPrice <= curLowPrice) {
                      curLowIndex = index
                      curLowPrice = sku.skuCurrentPrice
                    }
                    sku.skuEnabled = true
                    return {
                      "materialId": sku.materialId,//物料编码
                      "goodsSkuId": sku.goodsSkuId,//skuId
                      "isJoin": 0,
                      skuAttributes: sku.skuAttributes || [],
                      skuStock: sku.skuStock,
                      "a_stock": sku.activityStock,//活动库存
                      skuCurrentPrice: sku.skuCurrentPrice ? sku.skuCurrentPrice : 0,
                      "a_price": sku.activityGoodsSkuPrice ? Decimal(sku.activityGoodsSkuPrice).div(Decimal(100)).toFixed(2) : 0,//活动价格
                      'isLimit': sku.quota === -1 ? 0 : 1,
                      "quota_count": sku.quota === -1 ? null : sku.quota,
                      "virtualCount": sku.virtualNum//虚拟抢购件数
                    }
                  })
                  good.skuInfoVos[curLowIndex].isJoin = 0
                  good.skuInfoVos[curLowIndex].isLow = true
                  dataSource.push(good)
                })
                setDataSource(dataSource)
              } else {
                message.error(codeMessage)
              }
            } else {
              message.error(res.codeMessage)
            }
          })
        }
        option.onSuccess();

      } else {
        props.formRef.current.validateFields(['activityTime'])
      }
    }
  }
  let tableProps = {}
  if (mode === 'view') {
    tableProps = {
      toolBarRender: false
    }
  }
  else {
    tableProps = {
      toolBarRender: (action) => {
        return action.toolBarRender
      }
    }
  }

  const onAlertClose = () => {
    setAlertType(undefined)
  }

  const downloadExcel = () => {
    const a = document.createElement('a')
    a.href = importInfo.failFile
    document.body.append(a)
    a.click()
    a.remove()
  }

  return <>
    <ProTable
      {...tableProps}
      className='noCanJoinGood'
      readonly={true}
      rowKey={(record) => record.goodsId}
      search={false}
      options={false}
      bordered={true}
      cardBordered={mode !== 'view'}
      scroll={{ y: '500px' }}
      headerTitle={
        <Space>
          <TheButton
            key="save"
            onClick={() => {
              setModalOpen(true)
            }}
          >
            选择商品
          </TheButton>
          <Upload {...uploadProps}>
            {mode === 'edit' ? <TheButton
              key="into"
            >
              批量修改
            </TheButton> : isProprietary !== 'N' ? <TheButton
              key="into"
            >
              批量导入
            </TheButton> : null}
            {/* <TheButton
                            key="into"
                        >
                            {mode === 'edit' ? '批量修改' : '批量导入'}
                        </TheButton> */}
          </Upload>
          {
            isProprietary !== 'N' && <TheButton
              key="down"
              onClick={() => {
                downloadDemo()
              }}
            >
              下载导入文件模板
            </TheButton>
          }
        </Space>
      }
      columns={columns}
      dataSource={dataSource}
      pagination={{
        current: pageParams.pageNo,
        pageSize: pageParams.pageSize,
        onChange: (page, pageSize) => setPageParams({
          pageNo: page,
          pageSize: pageSize
        }),
      }}
    />
    <Modal
      title={'选择商品'}
      width={'80%'}
      open={modalOpen}
      destroyOnClose={true}
      onOk={() => {
        // 处理已选择商品再次勾选/不勾选，已设置值是否清空问题
        if (dataSource.length) {
          let oldData = dataSource.map(item => item.goodsId);
          let newData = selectedRows.map(item => item.goodsId);
          let saveIds = oldData.filter(item => newData.includes(item));
          selectedRows.map(item => {
            if (saveIds.includes(item.goodsId)) {
              const data = props.formRef.current.getFieldValue(['temp', item.goodsId])
              let skuInfoVos = []
              item.skuInfoVos.forEach((v, i) => {
                if (data && data.skuInfoVos) {
                  skuInfoVos.push({ ...v, ...data.skuInfoVos[i] })
                } else {
                  skuInfoVos.push({ ...v })
                }
              })
              item.skuInfoVos = skuInfoVos;
              item.killSort = data ? data.killSort : null;
              return item
            }
          })
          let ids = oldData.filter(item => !newData.includes(item))
          ids.forEach(item => {
            props.formRef.current.resetFields([['temp', item]]);
          })
        }
        // 设置表单表格数据
        setDataSource(selectedRows)
        setModalOpen(false)
      }}
      onCancel={() => setModalOpen(false)}
    >
      <ProTable
        bordered={true}
        options={false}
        scroll={{ y: '57vh' }}
        rowKey={(record) => record.goodsId}
        columns={goodsColumns}
        params={{
          storeStatus: 'Y',
          goodsStatus: 'Y',
          reviewStatus: 'T'
        }}
        request={async (params, sort, filter) => {
          // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
          // 如果需要转化参数可以在这里进行修改
          const res = await apiGoodsStockInfo({
            pageNo: params.current,
            pageSize: params.pageSize,
            ...params
          });
          return {
            data: res.data,
            // success 请返回 true，
            // 不然 table 会停止解析数据，即使有数据
            success: res.code === 0,
            // 不传会使用 data 的长度，如果是分页一定要传
            total: res.totalCount,
          };
        }}
        pagination={{
          defaultPageSize: 10
        }}
        rowSelection={{
          defaultSelectedRowKeys: selectKeys,
          preserveSelectedRowKeys: true,
          onChange: (keys, rows) => {
            setSelectedRows((prev) => {
              let arr = []
              // 处理跨页勾选值问题
              rows.forEach((item, index) => {
                if (item === undefined) {
                  arr.push(prev.find(v => v.goodsId === keys[index]))
                }
                else {
                  arr.push(item)
                }
              })
              return arr;
            });
          },
          getCheckboxProps: (record) => {
            return {
              disabled: disabledKeys.includes(record.goodsId),
            }
          },
        }}
        search={{
          optionRender: (searchConfig, formProps, dom) => {
            return dom.reverse()
          }
        }}
      />
    </Modal>
    {
      alertType && <div style={{ width: '100vw', height: '100vh', position: 'fixed', left: 0, top: 0, zIndex: 9999 }}>
        <Alert
          style={{ margin: '100px auto', width: 500 }}
          message={importInfo.title}
          showIcon
          description={importInfo.message}
          type={alertType}
          closable
          onClose={() => onAlertClose()}
          action={
            alertType === 'error' && <Space direction="vertical">
              <Button size="small" type="primary" onClick={downloadExcel}>
                下载文件
              </Button>
            </Space>
          }
        />
      </div>
    }
  </>
}
export default Editable;
